<script setup lang="ts">
import DetailLie from '@/components/Lie/DetailLie.vue'
import DetailImage from '@/components/Image/DetailImage.vue'

import {ref,reactive} from 'vue';
import imgs from '@/assets/demo.png'

const active = ref(0);
type listInfo={
    name:string,
    sex:string,
    info:string,
    age:number | null,
    img:string[]
}
interface Info{
    val:{
        info:listInfo,
        obj?:listInfo[]
    }
}
//模拟获取到数据
const detail=reactive<Info>({
    val:{
        info:{
            name:'',
            sex:'',
            info:'',
            age:null,
            img:[]
        }
    }
})

//赋值
detail.val={
    info:{
        name:'啊啊啊',
        sex:'搜索',
        info:'少时诵诗书所三四十所所所所所所所所所所所所所所所所所所所所所',
        age:22,
        img:[imgs,imgs,imgs,imgs],
    },
    obj:[
        {
            name:'啊啊啊',
            sex:'搜索',
            info:'少时诵诗书所三四十所所所所所所所所所所所所所所所所所所所所所',
            age:22,
            img:[imgs,imgs,imgs,imgs],
        },
        {
            name:'222',
            sex:'搜索',
            info:'少时诵诗书所三四十所所所所所所所所所所所所所所所所所所所所所',
            age:22,
            img:[imgs,imgs,imgs],
        }
    ]
}
const {name,sex,info,img}=detail.val.info;

</script>
<template >
    <div class="padding_15">
        <div class="public-detail-box padding_bot_0">
            <DetailLie name="啊啊啊啊" :value="name"/>
            <DetailLie name="商铺名称" :value="sex"/>
            <DetailLie name="店铺信息" :value="info"/>
            <DetailImage name="店铺图片" :value="img"  />
                
            
        </div>
        <div class="public_tab_box"> 
            <van-tabs v-model:active="active">
                <div class="con"> 
                    <van-tab :title="itme.name" v-for="(itme, index) in detail.val.obj" :key="index">
                        <DetailLie name="啊啊啊啊" :value="itme.name"/>
                        <DetailLie name="商铺名称" :value="itme.sex"/>
                        <DetailLie name="店铺信息" :value="itme.info"/>
                        <DetailImage name="店铺图片" :value="itme.img"  />
                    </van-tab>
                   
                </div>
        
            </van-tabs>
        </div>

 
    </div>
</template>

<style lang="scss" scoped>

</style>

